<template>
  <div class="mobile-config pro">
    <div v-for="(item, key) in rCom" :key="key">
      <component :is="item.components.name" :configObj="configObj" ref="childData" :configNme="item.configNme" :key="key" @getConfig="getConfig" :index="activeIndex" :num="item.num"></component>
    </div>
    <rightBtn :activeIndex="activeIndex" :configObj="configObj"></rightBtn>
  </div>
</template>

<script>
import toolCom from '@/components/mobileConfigRight/index.js'
import { mapState } from 'vuex'
import rightBtn from '@/components/rightBtn/index.vue';

export default {
  name: 'c_card_hot_info',
  cname: '热点资讯',
  componentsName: 'card_hot_info',
  props: {
    activeIndex: { type: null },
    num: { type: null },
    index: { type: null },
    number: { type: null }
  },
  components: {
    ...toolCom,
    rightBtn,
  },
  data() {
    return {
      configObj: {},
      rCom: [
          { components: toolCom.c_set_up, configNme: 'setUp' }
      ]
    }
  },
  watch: {
    'configObj.setUp.tabVal': {
      handler(nVal) {
        const arr = [{ components: toolCom.c_set_up, configNme: 'setUp' }];
        if (nVal === '0') {
         
          const contentArr = [
            { components: toolCom.c_input_item, configNme: 'titleBarText' },
            { components: toolCom.c_input_item, configNme: 'moreText' },
            { components: toolCom.c_input_item, configNme: 'moreLink' },
            { components: toolCom.c_input_item, configNme: 'buttonText' },
            {components: toolCom.c_card_hot_info_config,configNme: 'hotConfig'},
          ];
          this.rCom = arr.concat(contentArr);
        } else {
         
          const styleArr = [
            
            { components: toolCom.c_bg_color, configNme: 'titleBarColor' },
            { components: toolCom.c_slider, configNme: 'titleBarFontSize' },
            { components: toolCom.c_bg_color, configNme: 'moreTextColor' },
            { components: toolCom.c_slider, configNme: 'moreFontSize' },
            { components: toolCom.c_bg_color, configNme: 'titleColor' },
            { components: toolCom.c_slider, configNme: 'titleFontSize' },
            { components: toolCom.c_bg_color, configNme: 'bgColor' },
            { components: toolCom.c_bg_color, configNme: 'itemBgColor' },
            { components: toolCom.c_slider, configNme: 'descFontSize' },
            { components: toolCom.c_bg_color, configNme: 'buttonColor' },
            { components: toolCom.c_bg_color, configNme: 'buttonTextColor' },
            { components: toolCom.c_slider, configNme: 'buttonFontSize' },
            { components: toolCom.c_txt_tab, configNme: 'bgStyle' },
            { components: toolCom.c_slider, configNme: 'prConfig' },
            { components: toolCom.c_slider, configNme: 'mbConfig' }
          ];
          this.rCom = arr.concat(styleArr);
        }
      },
      immediate: true,
      deep: true
    },
    num(nVal) {
      let value = JSON.parse(JSON.stringify(this.$store.state.mobildConfig.defaultArray[nVal]))
      this.configObj = value;
    },
    configObj: {
      handler(nVal) {
        this.$store.commit('mobildConfig/UPDATEARR', { num: this.num, val: nVal });
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      let value = JSON.parse(JSON.stringify(this.$store.state.mobildConfig.defaultArray[this.num]))
      this.configObj = value;
    })
  },
  methods: {
    getConfig(data) {
      // 配置变更处理逻辑
    }
  }
}
</script>

<style scoped>
</style>